<template>
    <el-container>
        <el-aside width="15%"></el-aside>
        <el-main>
            <el-alert title="以下会显示所有车位的实时状态" type="info" show-icon></el-alert>
            <el-divider></el-divider>
            <!--栅格-->
            <!--表格行数由parkingSpaceList长度决定，当length能被8整除则行数为length/8，否则为length/8 注意v-for遍历数字从1开-->
            <el-row :gutter="20"
                    v-for="i in parkingSpaceList.length % 8 == 0? parkingSpaceList.length/8+1 : parkingSpaceList.length/8+2" :key="i">
                <el-col v-for="(item) in parkingSpaceList.slice(8*(i-1), 8*(i-1) + 8)" :span="3" :key="item.id">
                    <!--一行显示8个单元格-->
                    <div class="grid-content" v-bind:class="item.locked?'bg-red':'bg-green'">
                        编号：<strong>{{item.id}}</strong><br/>
                        <strong>{{statusType[item.status]}}</strong>
                    </div>
                </el-col>
            </el-row>

            <el-divider></el-divider>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="停车库车位示意图" name="1">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <img width="90%" src="../static/img/park/park.png"/>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>

            <el-divider></el-divider>
            <el-button type="primary" @click="$router.push('/reserve')">预约车位页面<i
                    class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-button type="info" @click="$router.push('/path')">停车引导页面<i
                    class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-main>
        <el-aside width="15%"></el-aside>
    </el-container>
</template>

<script>
import axios from 'axios'
export default {
    name: 'ParkSpace',
    data() {
        return {
            activeNames: ['0'],
            //
            statusType: ['空闲', '占用', '被预定', '管理员锁定'],
            parkingSpaceList: []
        }
    },
    methods: {
        findAll () {
            axios.get("/park").then(
                (response) => {
                    this.parkingSpaceList = response.data;
                },
                (err) => {
                    console.warn(err);
                }
            );
        }
    },
    mounted() {
        //页面加载完成时查询全部车位信息
        this.findAll()

        //使用websocket显示实时车位信息
        var ip_addr = document.location.hostname;//服务器ip地址
        var websocket = null;
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + ip_addr + ":8080/ws/park");
            this.$websocket = websocket;
        } else {
            alert("浏览器不支持websocket");
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("WebSocket连接发生错误");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = (event) => {
            //这里用箭头函数，this才是vm
            console.log('WebSocket收到推送数据', event.data);
            var jsonObj = JSON.parse(event.data);//把接收的json字符串转为对象
            this.parkingSpaceList.splice(jsonObj.id - 1, 1, jsonObj);//修改数组值要用splice，这里表示将索引为1开始的一个元素修修改为response.data
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        // window.onbeforeunload = function () {
        //     websocket.close();
        // }

        //发送消息
        // function send() {
        //     var message = document.getElementById('text').value;
        //     websocket.send(message);
        // }
    },
    beforeDestroy() {
        //销毁组件时关闭websocket连接
        this.$websocket.close()
    }
}
</script>

<style scoped>
        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        /* &
        :last-child {
            margin-bottom: 0;
        } */

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-green {
            background: green;
        }

        .bg-red {
            background: red;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            height: 150px;
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
</style>
